  <template>
    <div class="liuliangChart_main_container">
        <chart-view class="liuliang-chart-content"  :chart-option="LiuLiangChartOpt" :auto-resize="true" :play-highlight="false" height="130px" />
    </div>
  </template>
  
  <script>
  

  
  export default {
    name:'LiuLiangChart',
    components:{

    },
    props: {
      chartData: {
        type: Object,
        default: function () {
          return {}
        }
      },
    },
    watch: {
      chartData: {
            handler(newVal, oldVal) {
                console.log("*****liuliang*********",newVal);
                this.LiuLiangChartOpt = this.$eChartFn.LiuLiangChart(newVal);
                
            },
            // immediate:true
        }
    },
    created() {
      this.LiuLiangChartOpt = this.$eChartFn.LiuLiangChart();
    },
    data() {
      return {
        LiuLiangChartOpt: {}
      };
    },
  
    methods: {

    },
  };
  </script>
  
  <style lang="scss" scoped>
  .liuliangChart_main_container {
    // width: 100%;
    // height: 100%;
    // background-color: yellow;
  }

  .liuliang-chart-content {
    // height: 270px;
    // width: 100%;
    // height: 100%;
    width: 520px;
    height: 130px;
  }
  
  </style>